<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { useCoinStore } from '@/store/coin'
import { userStore } from '@/store/user'
const props = defineProps({
    width: {
        type: String,
        default: ''
    },
    info: {},
    currentInfo: {
        type: Object,
        default: () => { }
    }
})
const isEnter = ref(false)
const isHiden = ref(false)

const mouseleaveFn = () => {
    isEnter.value = false
}
const mouseenterFn = () => {
    isEnter.value = true
}
const info = computed(() => {
    return useCoinStore().getPrice(useCoinStore().coinInfo.name)
})
const info1 = ref<any>({})
const emaList = ref<{ title: string; value: number }[]>([])
const emaList1 = ref<{ title: string; value: number }[]>([])
const emit = defineEmits(['setMainIndicator'])
const setMainIndicator = () => {
    emit('setMainIndicator', 'macd', 'vice')
}
const colorList = computed(() => {
    const obj: Record<string, string> = {}
    userStore().mainIndicator.macd.list.map((item: any) => {
        obj[item.title] = item.color
    })
    return obj
});
watch(() => useCoinStore().infoMACD, (v: Record<string, number>) => {
    let list = []
    for (let i in v) {
        if (userStore().mainIndicator.macd.list.filter((item: any) => item.checked).map((item: any) => item.title).includes(i)) {
            list.push({ title: i, value: v[i] })
        }
    }
    emaList.value = list
})
watch(() => props.currentInfo.MACD, (v) => {
    const data = v.MACD
    if (data) {
        let list = []
        for (let i in data) {
            if (userStore().mainIndicator.macd.list.filter((item: any) => item.checked).map((item: any) => item.title).includes(i)) {
                list.push({ title: i, value: data[i] })
            }
        }
        emaList1.value = list
    }
})
watch(() => props.info, (v: any) => {
    info1.value = v
})
</script>

<template>
    <div @mouseenter="mouseenterFn" @mouseleave="mouseleaveFn" :style="{ width: isHiden ? '14px' : '' }" class=" dark:hover:border-[#333b47] leading-[12px] rounded-[4px] p-[4px] flex items-center flex-wrap cursor-pointer
    hover:border-[#ededed] border-solid border-[1px] border-[transparent]">
        <div :class="[isHiden ? '' : 'mr-[6px]']" @click="isHiden = !isHiden"
            class="iconfont icon-you text-[12px]  text-[#BFBFBF] font-bold  dark:text-[#707a8a] "
            :style="{ 'transform': !isHiden ? 'rotate(90deg)' : 'rotate(0deg)' }" style="transition: 0.5s;"></div>
        <template v-if="!isHiden">
            <div v-show="!useCoinStore().coinInfo.inCharts"
                class="flex items-center text-[#9c9c9c] dark:text-[#707a8a] mr-[10px]">MACD({{
                    userStore().mainIndicator.macd.periodList.map((item: any) => item.value).join(',')}})</div>
            <div v-show="!useCoinStore().coinInfo.inCharts" class="flex items-center" v-for="item, i in emaList"
                :key="i">
                <div class="flex-shrink-0 text-[#9c9c9c] dark:text-[#707a8a] mr-[10px]">{{ item.title }}:</div>
                <div class="flex-shrink-0   mr-[10px]"
                    :style="{ color: colorList[item.title] ? colorList[item.title] : info1.open > info1.close ? '#f6465d' : '#2ebd85' }">
                    {{
                        item.value.toFixed(2)
                    }}
                </div>
            </div>
            <div v-show="useCoinStore().coinInfo.inCharts"
                class="flex items-center text-[#9c9c9c] dark:text-[#707a8a] mr-[10px]">MACD({{
                    userStore().mainIndicator.macd.periodList.map((item: any) => item.value).join(',')}})</div>
            <div v-show="useCoinStore().coinInfo.inCharts" class="flex items-center" v-for="item, i in emaList1"
                :key="i">
                <div class="flex-shrink-0 text-[#9c9c9c] dark:text-[#707a8a] mr-[10px]">{{ item.title }}:</div>
                <div class="flex-shrink-0 mr-[10px]"
                    :style="{ color: colorList[item.title] ? colorList[item.title] : info1.open > info1.close ? '#f6465d' : '#2ebd85' }">
                    {{
                        item.value.toFixed(2)
                    }}
                </div>
            </div>
            <div v-show="isEnter" class="flex items-center">
                <div class="iconfont  text-[14px] text-[#9c9c9c]"
                    :class="[userStore().mainIndicator.vol.hide ? 'icon-kejian' : 'icon-bukejian']"
                    @click="userStore().setMainIndicatorHiden('macd', !userStore().mainIndicator.macd.hide)">
                </div>
                <div @click="setMainIndicator" class="iconfont icon-shezhi text-[11px] text-[#9c9c9c] ml-[8px]"></div>
                <div @click="userStore().setMainIndicatorChecked('macd', false)"
                    class="iconfont icon-guanbi text-[8px] text-[#9c9c9c] ml-[8px]"></div>
            </div>
        </template>
    </div>
</template>

<style scoped></style>